<!--
  - Copyright (C) 2024
  - All rights reserved, Designed By www.joolun.com
  - 注意：
  - 本软件为www.joolun.com开发研制，未经购买不得使用
  - 购买后可获得全部源代码（禁止转卖、分享、上传到码云、github等开源平台）
  - 一经发现盗用、分享等行为，将追究法律责任，后果自负
-->
<!--直播间底部 输入框 商品等-->
<template>
	<view class="live-bottom" :style="{ width: sysInfo.windowWidth + 'px', bottom: inputBottom + 'px' }">
		<view class="live-bottom-input" >
			<input
				v-model="msgText"
				class="live-bottom-input-box"
				:placeholder="inputPlaceholder"
				type="text"
				maxlength="50"
				confirm-type="send"
				@confirm="sendMessage"
				@blur="hideKeyboard"
				:adjust-position="false"
			/>
			<text v-if="msgText" @tap="sendMessage" class="live-bottom-send-text">发送</text>
		</view>
		<image class="live-bottom-right" src="/package-live/static/img/icon_shopping.png" @tap="onShowGoods" />
	</view>
</template>

<script>
export default {
	props: {
		liveStatus: [String, Number],
		liveInfo: {
			type: Object,
			default() {
				return {};
			}
		},
		sysInfo: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	data() {
		return {
			msgText: '',
			inputPlaceholder: '说点什么吧...',
			inputBottom: 0
		};
	},
	mounted() {
		// 键盘高度监听事件
		// #ifndef H5
		uni.onKeyboardHeightChange((res) => {
			this.inputBottom = res.height;
		});
		// #endif
	},
	unmounted() {
		// #ifndef H5
		uni.offKeyboardHeightChange((res) => {
			this.inputBottom = 0;
		});
		// #endif
	},
	methods: {
		sendMessage() {
			if(this.liveStatus=='1'){
				this.$emit('sendMsg', this.msgText);
				this.msgText = '';
				this.inputBottom = 0;
				uni.hideKeyboard();
			}
		},
		hideKeyboard() {
			uni.hideKeyboard();
		},
		onShowGoods() {
			this.$emit('onShowGoods');
		}
	}
};
</script>

<style scoped lang="scss">
.live-bottom {
	position: fixed;
	bottom: 0;
	width: 100vw;
	padding: 10px;
	display: flex;
	flex-direction: row;
	align-items: center;
	z-index: 99;

	.live-bottom-input {
		flex: 1;
		background: rgba(0, 0, 0, 0.3);
		height: 68rpx;
		border-radius: 50px;
		display: flex;
		flex-direction: row;
		align-items: center;
		.live-bottom-input-box {
			flex: 1;
			padding: 0 26rpx;
			height: 68rpx;
			line-height: 68rpx;
			color: #fff;
			font-size: 28rpx;
		}
		.live-bottom-send-text {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 10px;
			color: #aaaaaa;
			font-size: 22rpx;
		}

		.live-bottom-cancel-text {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 10px;
			color: #888888;
			font-size: 22rpx;
		}
	}
	.live-bottom-right {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 10px;
		width: 60rpx;
		height: 60rpx;
	}
}
</style>
